<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通过 Ajax 发送数据</title>
</head>
<body>
    <script>
        function load() {
            $(document).ready(function () {
                $('#letter-a a').click(function (e) {
                    e.preventDefault();
                    $('#dictionary').load('a.html');
                });
            });
        }

        function loaded() {
            $(document).ready(function () {
                $('#letter-a a').click(function (e) {
                    e.preventDefault();
                    $('#dictionary').load('a.html');
                    alert('Loaded!')
                });
            });
        }

        function json() {
            var json = {
                'key': 'value',
                'key 2': ['array', 'of', 'items']
            };
        }

        function getJSON3() {
            $(document).ready(function () {
                $('#letter-b a').click(function (e) {
                    e.preventDefault();
                    $.getJSON('b.json');
                });
            });
        }

        function getJSON2() {
            $(document).ready(function () {
                $('#letter-b a').click(function (e) {
                    e.preventDefault();
                    $.getJSON('b.json', function (data) {

                    });
                });
            });
        }

        function getJSON() {
            $(document).ready(function () {
                $('#letter-b a').click(function (e) {
                    e.preventDefault();
                    $.getJSON('b.json', function (data) {
                        var html = '';
                        $.each(data, function (index, item) {
                            html += [
                                '<div class="entry">',
                                '<h3 class="term">', item.term, '</h3>',
                                '<div class="part">', item.part, '</div>',
                                '<div class="definition">', item.definition, '</div>',
                                '</div>'
                            ].join();
                        });
                        $('#dictionary').html(html);
                    });
                });
            });
        }

        function concat() {
            $(document).ready(function () {
                $('#letter-b a').click(function (e) {
                    e.preventDefault();
                    $.getJSON('b.json', function (data) {
                        var html = [];
                        $.each(data, function (index, item) {
                            html = html.concat([
                                '<div class="entry">',
                                '<h3 class="term">', item.term, '</h3>',
                                '<div class="part">', item.part, '</div>',
                                '<div class="definition">', item.definition, '</div>'
                            ]);
                            if (item.quote) {
                                var quote = '<div class="quote">';
                                $.each(item.quote, function (index, item) {
                                    html = html.concat(['<div class="quote-line">', item, '</div>']);
                                });
                                if (item.author) {
                                    html = html.concat(['<div class="quote-author">', item.author, '</div>']);
                                }
                                html = html.concat('</div>')
                            }
                            html = html.concat('</div>');
                        });
                        html = html.join('');
                        $('#dictionary').html(html);
                    });
                });
            });
        }

        function getScript() {
            $(document).ready(function () {
                $('#letter-c a').click(function (e) {
                    e.preventDefault();
                    $.getScript('c.js');
                });
            });
        }

        function getXml2() {
            $(document).ready(function () {
                $('#letter-d a').click(function (e) {
                    e.preventDefault();
                    $.get('d.xml', function (data) {

                    });
                });
            });
        }

        function getXml() {
            $(document).ready(function () {
                $('#letter-d a').click(function (e) {
                    e.preventDefault();
                    $.get('d.xml', function (data) {
                        $('#dictionary').empty();
                        $(data).find('entry').each(function () {
                            var $entry = $(this);
                            var html = [];
                            html = html.concat([
                                '<div class="entry">',
                                '<h3 class="term">', $entry.attr('term'), '</h3>',
                                '<div class="part">', $entry.attr('part'), '</div>',
                                '<div class="definition">', $entry.find('definition').text()
                            ]);
                            var $quote = $entry.find('quote');
                            if ($quote.lenght) {
                                html = html.concat('<div class="quote">');
                                $quote.find('line').each(function () {
                                    html = html.concat([
                                        '<div class="quote-line">', $(this).text(), '</div>'
                                    ]);
                                });
                                if ($quote.attr('author')) {
                                    html = html.concat([
                                        '<div class="quote-author">', $quote.attr('author'), '</div>'
                                    ]);
                                }
                                html = html.concat('</div>')
                            }
                            html = html.concat(['</div>', '</div>']);
                            $('#dictionary').append(html.join(''));
                        });
                    });
                });
            });
        }

        function getRequest() {
            $(document).ready(function () {
                $('#letter-e a').click(function (e) {
                    e.preventDefault();
                    var requestData = { term: $(this).text() };
                    $.get('http://localhost:3000', requestData, function (data) {
                        $('#dictionary').html(data);
                    });
                });
            });
        }

        function postRequest() {
            $(document).ready(function () {
                $('#letter-e a').click(function (e) {
                    e.preventDefault();
                    var requestData = { term: $(this).text() };
                    $.post('http://localhost:3000', requestData, function (data) {
                        $('#dictionary').html(data);
                    });
                });
            });
        }

        function loadRequest() {
            $(document).ready(function () {
                $('#letter-e a').click(function (e) {
                    e.preventDefault();
                    var requestData = { term: $(this).text() };
                    $('#dictionary').load('http://localhost:3000', datrequestDataa);
                });
            });
        }

        function submit() {
            $(document).ready(function () {
                $('#letter-f form').submit(function (e) {
                    $.get('http://localhost:3000/', { term: $('input[name="term"]').val() }, function (data) {
                        $('#dictionary').html(data);
                    });
                });
            });
        }

        function serialize() {
            $(document).ready(function () {
                $('#letter-g form').submit(function (e) {
                    e.preventDefault();
                    var formValues = $(this).serialize();
                    $.get('htttp://localhost:3000/', formValues, function (data) {
                        $('#dictionary').html(data);
                    });
                });
            });
        }

        function loading() {
            $(document).ready(function () {
                $('<div id="loading">Loading...</div>').insertBefore('#dictionary');
            });
        }

        function ajaxStart() {
            $(document).ready(function () {
                var $loading = $('<div id="loading">Loading...</div>').insertBefore('#dictionary');
                $(document).ajaxStart(function () {
                    $loading.show();
                });
            });
        }

        function ajaxStop() {
            $(document).ready(function () {
                var $loading = $('<div id="loading">Loading</div>').insertBefore('#dictionary');
                $(document).ajaxStart(function () {
                    $loading.show();
                }).ajaxStop(function () {
                    $loading.hide();
                });
            });
        }

        function loadhtml() {
            $(document).ready(function () {
                $('#letter-a a').click(function (e) {
                    e.preventDefault();
                    $('#dictionary').load('a.html');
                });
            });
        }

        function fadeIn() {
            $(document).ready(function () {
                $('#letter-a a').click(function (e) {
                    e.preventDefault();
                    $('#dictionary').hide().load('a.hmtl', function () {
                        $(this).fadeIn();
                    });
                });
            });
        }

        function fail() {
            $(document).ready(function () {
                $('#letter-e a').click(function (e) {
                    e.preventDefault();
                    var requestData = { term: $(this).text() };
                    $.get('z.html', requestData, function (data) {
                        $('#dictionary').html(data);
                    }).fail(function (jqXHR) {
                        $('#dictionary').html('An error occurred: ' + jqXHR.status).append(jqXHR.responseText);
                    });
                });
            });
        }

        function siblings() {
            $(document).ready(function () {
                $('h3.term').click(function () {
                    $(this).siblings('.definition').slideToggle();
                });
            });
        }

        function on() {
            $(document).ready(function () {
                $('body').on('click', 'h3.term', function () {
                    $(this).siblings('.definition').slideToggle();
                });
            });
        }

        function immitScript() {
            $(document.createElement('script'))
                .attr('src', 'http://example.com/example.js')
                .appendTo('head');
        }

        function jsonp() {
            $(document).ready(function () {
                var url = 'http://examples.learningjquery.com/jsonp/g.php';
                $('#letter-g a').click(function (e) {
                    e.preventDefault();
                    $.getJSON(url + '?callback=?', function (data) {
                        var html = [];
                        $.each(data, function (index, item) {
                            var html = [
                                '<div class="entry">',
                                '<h3 class="term">', item.term, '</h3>',
                                '<div class="part">', item.part, '<div>',
                                '<div class="definition">', item.definition
                            ];
                            if (item.quote) {
                                html += html.concat('<div class="quote">');
                                $.each(item.quote, function (index, item) {
                                    html += html.concat(['<div class="quote-line">', line, '</div>']);
                                });
                                html += html.concat('</div>');
                            }
                            html += html.concat(['</div>', '</div>']);
                        });
                        $('#dictionary').html(html.join(''));
                    });
                });
            });
        }

        function ajax() {
            $.ajax({
                url: 'a.html',
                success: function (data) {
                    $('#dictionary').html(data);
                }
            });
        }

        function ajaxSetup() {
            $.ajaxSetup({
                url: 'a.html',
                type: 'POST',
                dataType: 'html'
            });

            $.ajax({
                type: 'GET',
                success: function (data) {
                    $('#dictionary').html(data);
                }
            });
        }

        function html() {
            $(document).ready(function () {
                $('#letter-h a').click(function (e) {
                    e.preventDefault();
                    $('#dictionary').load('h.hmtl');
                });
            });
        }

        function body() {
            $(document).ready(function () {
                $('#letter-h a').click(function (e) {
                    $('#letter-h a').click(function (e) {
                        e.preventDefault();
                        $('#dictionary').load('h.html .entry');
                    });
                });
            });
        }
    </script>
</body>
</html>